JSON (JavaScript Object Notation) একটি লাইটওয়েট ডেটা ইন্টারচেঞ্জ ফরম্যাট যা মানুষের জন্য পড়তে সহজ এবং মেশিনের জন্য পার্স করা সহজ। REST API (Representational State Transfer) হল একটি সফটওয়্যার আর্কিটেকচার শৈলী যা ওয়েব সেবা তৈরির জন্য ব্যবহার করা হয়। Highcharts ব্যবহার করে JSON বা REST API থেকে ডেটা নিয়ে চার্টে ইন্টিগ্রেশন করা সম্ভব। এটি রিয়েল-টাইম ডেটা প্রদর্শনের জন্য খুবই কার্যকরী, যেমন স্টক মার্কেট ডেটা, ওয়েদার ডেটা, ইউজার এনগেজমেন্ট ইত্যাদি।

এখানে আমরা দেখব কিভাবে REST API বা JSON ফাইল থেকে ডেটা নিয়ে Highcharts এর মাধ্যমে ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা যায়।

1. REST API থেকে ডেটা ফেচ করা

Highcharts এর সাথে REST API ব্যবহার করে ডেটা ইন্টিগ্রেশন করতে হলে প্রথমে API থেকে ডেটা নিয়ে আসতে হবে। সাধারণত AJAX বা Fetch API ব্যবহার করা হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি API থেকে ডেটা নিয়ে আসা হচ্ছে এবং সেটি Highcharts-এ প্রদর্শিত হচ্ছে।

উদাহরণ: REST API থেকে ডেটা ফেচ করা এবং Highcharts এ প্রদর্শন করা

// Highcharts লাইব্রেরি ইনস্টল এবং লোড করার পর
Highcharts.getJSON('https://api.example.com/sales', function (data) {
    Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Over Time'
        },
        xAxis: {
            categories: data.dates  // API থেকে পাওয়া তারিখগুলো
        },
        yAxis: {
            title: {
                text: 'Sales'
            }
        },
        series: [{
            name: 'Sales Data',
            data: data.sales  // API থেকে পাওয়া বিক্রির ডেটা
        }]
    });
});

এখানে getJSON ফাংশন ব্যবহার করে API থেকে ডেটা ফেচ করা হচ্ছে। data.dates এবং data.sales API থেকে পাওয়া ডেটার জন্য নির্দিষ্ট কীগুলির মান। যখন API থেকে ডেটা আসে, তখন সেটি Highcharts-এ প্রদর্শিত হবে।

2. Fetch API ব্যবহার করে ডেটা ফেচ করা

Fetch API একটি আধুনিক পদ্ধতি, যা প্রমিস (Promise) ব্যবহার করে ওয়েব রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। এটি ব্রাউজারে সহজেই ব্যবহার করা যায় এবং ডেটা ফেচ করা খুবই সুবিধাজনক।

উদাহরণ: Fetch API ব্যবহার করে ডেটা ফেচ করা এবং Highcharts এ ইন্টিগ্রেট করা

fetch('https://api.example.com/sales')
    .then(response => response.json())
    .then(data => {
        Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Sales Data from API'
            },
            xAxis: {
                categories: data.dates  // API থেকে পাওয়া তারিখগুলির অ্যারে
            },
            yAxis: {
                title: {
                    text: 'Amount in USD'
                }
            },
            series: [{
                name: 'Sales Amount',
                data: data.sales  // API থেকে পাওয়া বিক্রির পরিমাণ
            }]
        });
    })
    .catch(error => console.error('Error fetching data: ', error));

এখানে fetch ফাংশন ব্যবহার করে API থেকে ডেটা নেওয়া হচ্ছে এবং এটি JSON ফরম্যাটে পার্স করা হচ্ছে। তারপর, সেই ডেটা ব্যবহার করে Highcharts এ বার চার্ট (bar chart) তৈরি করা হচ্ছে।

3. REST API থেকে ডেটা ফেচ করার জন্য Async/Await ব্যবহার করা

Async/Await আধুনিক JavaScript সিনট্যাক্স যা অ্যাসিনক্রোনাস কোডকে আরও পরিষ্কার এবং সহজ করে তোলে। এটি ব্যবহার করলে কোড আরও পাঠযোগ্য হয় এবং প্রমিস চেইনিং থেকে মুক্তি পাওয়া যায়।

উদাহরণ: Async/Await ব্যবহার করে REST API থেকে ডেটা ফেচ করা এবং Highcharts এ ইনপুট দেওয়া

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/sales');
        const data = await response.json();

        Highcharts.chart('container', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Sales Data'
            },
            xAxis: {
                categories: data.dates
            },
            yAxis: {
                title: {
                    text: 'Sales in USD'
                }
            },
            series: [{
                name: 'Sales',
                data: data.sales
            }]
        });
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

// Call the fetchData function to load the chart
fetchData();

এখানে async/await ব্যবহার করে REST API থেকে ডেটা ফেচ করা হয়েছে। এটি আরও সিনক্রোনাস কোডের মতো কাজ করে এবং ডেটা পাওয়ার পর সেটি Highcharts এ আপডেট করা হয়।

4. JSON ফাইল থেকে ডেটা ইন্টিগ্রেশন

আপনি local JSON file থেকেও ডেটা ফেচ করতে পারেন, যা কোনও সার্ভারে হোস্ট না করেও কাজ করবে। এভাবে, ডেভেলপমেন্ট পর্যায়ে আপনি JSON ফাইল থেকে ডেটা নিয়ে Highcharts এ প্রদর্শন করতে পারবেন।

উদাহরণ: Local JSON ফাইল থেকে ডেটা ফেচ করা

fetch('data/salesData.json')
    .then(response => response.json())
    .then(data => {
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Sales Data from Local JSON File'
            },
            xAxis: {
                categories: data.dates
            },
            yAxis: {
                title: {
                    text: 'Sales Amount'
                }
            },
            series: [{
                name: 'Sales',
                data: data.sales
            }]
        });
    })
    .catch(error => console.error('Error loading the JSON data:', error));

এখানে, fetch ফাংশন ব্যবহার করে একটি লোকাল JSON ফাইল থেকে ডেটা ফেচ করা হচ্ছে এবং তা Highcharts এ চার্ট হিসেবে প্রদর্শিত হচ্ছে।

সারাংশ

JSON বা REST API ব্যবহার করে Highcharts এ ডেটা ইন্টিগ্রেশন খুবই সহজ এবং কার্যকরী। আপনি AJAX, Fetch API, বা Async/Await ব্যবহার করে API থেকে ডেটা নিয়ে আসতে পারেন এবং তা Highcharts চার্টে প্রদর্শন করতে পারেন। এটি রিয়েল-টাইম ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য খুবই উপকারী এবং এভাবে ব্যবহারকারীরা ডেটার উপর ভিত্তি করে ডায়নামিক এবং ইন্টারঅ্যাকটিভ চার্ট দেখতে পারেন।